import React, { useState } from 'react';
import { Modal, Button,Image } from 'antd';
import './ModalA.less'



function ModalA(props) {
  console.log(111,props.data)
  const [isModalVisible, setIsModalVisible] = useState(false);
  
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <div className="modala">
      { <a  onClick={showModal}>
        查看
      </a> }
      <Modal className="aaa" centered={true} title="查看" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} footer={<Button id="footbtn" onClick={handleCancel}>返回</Button>}  destroyOnClose={true}>
                
                 <div className="modalBox">
                  <div className="d1">
                    <span >应用服务名称</span>
                    <span>{props.data.name}</span>
                  </div>
                  <div >
                    <span>应用图标</span>
                    <Image
                      width={30}
                      src={props.data.img}
                    />
                  </div>
                  <div>
                    <span>H5 </span>
                    <span id="a2">{props.data.h5}</span>
                  </div>
                  <div>
                    <span>描述</span>
                    <span id="a1">{props.data.content}</span>
                  </div>
                  <div>
                    <span>费用</span>
                    <span id="a1">{props.data.price}</span>
                  </div>
                  <div>
                    <span>排序</span>
                    <span id="a1">{props.data.sort}</span>
                  </div>
                  <div>
                    <span>状态</span>
                    <span id="a1">{props.data.state}</span>
                  </div>
                </div>
                 
      </Modal>
    </div>
  );
};

export default ModalA